<template>
	<view class="car">
		<!-- 空白页 -->
		<view v-if="empty===true" class="empty">
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" @click="navToLogin">去登陆></view>
			</view>
		</view>
		<view v-else class="container">
			<!-- <view class="c-header">
				<text class="tips">全场加购价</text>
				<text class="desc">再购130元立享满130元可超值换购</text>
				<text class="right">
					去凑单<text class="yticon icon-you"></text>
				</text>
			</view> -->
			<view class="car-list" v-for="(list,index) in carList" :key="index" @click="toDetail(list)">
				<view class="list-item">
					<view class="left">
						<image src="/static/img/1/94.png" mode="aspectFill" v-if="list.isChecked" @click.stop="changestatus(list.id)"></image>
						<image src="/static/img/1/81.png" mode="aspectFill" v-if="!list.isChecked" @click.stop="changestatus(list.id)"></image>
					</view>
					<view class="right">
						<view class="goods-img">
							<image :src="list.oSKU.cImgUrl" mode="aspectFill"></image>
						</view>
						<view class="info">
							<text class="name">{{list.oSKU.cSKUName}}</text>
							<text class="price">￥{{list.oSKU.fSalePrice}}</text>
							<view class="option">
								<text class="stock">库存:{{list.oSKU.lInventoryCount}}</text>
								<uni-number-box class="step" :min="1" :max="list.oSKU.lInventoryCount" :value="list.iQuantity" :index="index"
								 @eventChange="numberChange"></uni-number-box>
							</view>
						</view>
					</view>
				</view>

			</view>


			<Guess :goods_id_exclude='goods_id_exclude' :categoryid='categoryid' :type='type' v-if="goods_id_exclude.length>0"></Guess>


		</view>
		<view class="footer-btn">
			<view class="left">
				<view class="checkall">
					<image src="/static/img/1/81.png" mode="aspectFill" v-if="carList.length != checkedLength||carList.length==0"
					 @click="checkAll(1)">
						<image src="/static/img/1/94.png" mode="aspectFill" v-if="carList.length == checkedLength&&carList.length!=0"
						 @click="checkAll(0)">

						</image>全选
				</view>
				<view class="freight" v-if="!edit">不含运费</view>
			</view>
			<view class="right" v-if="!edit">
				<view class="total">合计：<text class="price">{{total}}</text></view>
				<view class="settlement" @click="toorder">结算（{{checkedLength}}）</view>
			</view>
			<view class="right" v-if="edit" style="justify-content: flex-end;">
				<view class="settlement" @click="delGoods">删除（{{checkedLength}}）</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
	import Guess from '@/components/like/guess2.vue'
	export default {
		components: {
			uniNumberBox,
			Guess
		},
		data() {
			return {
				empty: false, //空白页现实  true|false
				carList: [],
				total: 0,
				checkedLength: 0,
				hasLogin: true,
				goods_id_exclude: [],
				categoryid: [],
				type: 0,
				edit:false
			}
		},
		computed: {
			// if(this.$SysCache.get('token') == null){
			// 	this.hasLogin = false
			// }else{
			// 	this.hasLogin = true
			// }
		},
		onLoad() {
			this.onloads()
		},
		onShow() {
			this.onloads()
		},
		mounted() {

		},
		methods: {
			onloads() {
				this.total = 0
				this.checkedLength = 0
				this.$Request.post(this.$api.httpApi.car.list + "&token=" + this.$SysCache.get('token')).then(res => {
					if (res.code == 200) {
						this.carList = res.data.lsCart
						
						res.data.lsCart.forEach(item => {
							this.goods_id_exclude.push(item.iProductId)
						})
						if (res.data.lsCart.length > 0) {
							this.empty = false
						} else {
							this.empty = true
						}
					}
				})
			},
			numberChange(data) {
				if(!this.edit){
					let datas = []
					this.carList.forEach((item, indexs) => {
						if (indexs == data.index) {
							let obj = {}
							obj.token = this.$SysCache.get('token') || null
							obj.id = item.id
							obj.iSKUId = item.iSKUId
							obj.iQuantity = data.number
							obj.iProductId = item.iProductId
							obj.dlyType = item.dlyType
							datas.push(obj)
						}
					})

					this.$Request.post(this.$api.httpApi.car.update + "&token=" + this.$SysCache.get('token'), {
						"items": datas
					}).then(res => {
						if (res.code == 200) {

							this.carList[data.index].fTotalPrice = res.data[0].fSalePrice * data.number
							this.getTotal()
						}
					})
				}
				

			},
			changestatus(id) {
				this.carList.forEach(item => {
					if (item.id == id) {
						item.isChecked = !item.isChecked
					}
				})
				this.getTotal()

			},
			getTotal() {
				this.checkedLength = 0
				this.total = 0
				let datas = []
				this.carList.forEach(item => {
					if (item.isChecked) {
						this.checkedLength++
						// let obj = {}
						// obj.token = this.$SysCache.get('token')||null
						// obj.id = item.id
						// obj.iSKUId = item.iSKUId
						// obj.iQuantity = item.iQuantity
						// obj.iProductId = item.iProductId
						// obj.dlyType = item.dlyType
						// datas.push(obj)
						this.total += item.fTotalPrice

					}
				})
				// if(this.checkedLength>0){
				// 	this.$Request.post(this.$api.httpApi.car.GenerateOrderByShoppingCart+'&token='+this.$SysCache.get('token'),{"items":datas}).then(res => {
				// 	if (res.code == 200) {
				// 			this.total = res.data
				// 		}
				// 	})
				// }

			},
			checkAll(str) {
				if (str == 1) {
					this.carList.forEach(item => {
						item.isChecked = true
					})
				} else {
					this.carList.forEach(item => {
						item.isChecked = false
					})
				}
				this.getTotal()
			},
			toorder() {

				let datas = []
				this.carList.forEach(item => {
					if (item.isChecked) {
						let obj = {}
						obj.id = item.id
						obj.iSKUId = item.iSKUId
						obj.iQuantity = item.iQuantity
						obj.iProductId = item.iProductId
						obj.dlyType = item.dlyType
						datas.push(obj)


					}
				})
				if (this.checkedLength > 0) {
					this.$Request.post(this.$api.httpApi.car.GenerateOrderByShoppingCart + "&token=" + this.$SysCache.get('token'), {
						"items": datas
					}).then(res => {
						if (res.code == 200) {

							uni.navigateTo({
								url: `/pages/order/order`
							})
						}
					})
				}
			},
			//删除购物车商品
			delGoods(){
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确定删除？',
				    success: function (res) {
				        if (res.confirm) {
							let datas = []
							that.carList.forEach(item => {
								if (item.isChecked) {
									let obj = {}
									obj.id = item.id
									datas.push(obj)
								}
							})
							
							if (that.checkedLength > 0) {
								that.$Request.post(that.$api.httpApi.car.del + "&token=" + that.$SysCache.get('token'), {
									"items": datas
								}).then(res => {
									if (res.code == 200) {
							
										uni.showToast({
											title: res.message,
											duration: 2000
										})
										that.carList.forEach(item => {
											
											item.isChecked = false
											
										})
										that.onloads()
									}
								})
							}
							
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			cancelEdit(){
				this.edit = false
			},
			toDetail(index){
				uni.navigateTo({
					url:`/pages/detail/index?id=${index.iProductId}`
				})
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.text == "编辑") {
				
				var dd = document.getElementsByClassName("uni-page-head-btn")
				dd.forEach(item=>{
					if(item.children[0].innerText == "编辑"){
						item.children[0].innerText = "完成"
						
						this.edit = true
					}else if(item.children[0].innerText == "完成"){
						item.children[0].innerText = "编辑"
						this.edit = false
					}
				})
			} else {
				uni.navigateTo({
					url: `/pages/coupon/index`
				})
			}
		}


	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.car {
		.empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			image {
				width: 240upx;
				height: 160upx;
				margin-bottom: 30upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm+2upx;
				color: $font-color-disabled;

				.navigator {
					color: $uni-color-primary;
					margin-left: 16upx;
				}
			}
		}

		.container {
			padding-bottom: 134upx;

			.c-header {
				width: 100%;
				height: 80upx;
				background: rgba(255, 255, 255, 1);
				border: 1upx solid rgba(238, 238, 238, 1);
				border-radius: 9upx 9upx 0upx 0upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 23upx;
				margin-bottom: 21upx;

				.tips {
					width: 133upx;
					height: 45upx;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					font-size: 20upx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #fff;
					background: rgb(240, 64, 111);
				}

				.desc {
					font-size: 21upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
					margin-left: 9upx;
				}

				.right {
					flex: 1;
					text-align: right;
					font-size: 26upx;
					font-family: Microsoft YaHei;
					color: rgb(240, 64, 111);

					.icon-you {
						font-size: 26upx;
						color: rgb(240, 64, 111);
					}
				}
			}

			.car-list {
				width: 100%;
				// height:461px;
				background: rgba(255, 255, 255, 1);
				border-radius: 16upx;
				padding: 0 26upx;
				margin-bottom: 21upx;

				.list-item {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.left {
						width: 34upx;
						margin-right: 24upx;

						image {
							width: 34upx;
							height: 34upx;
						}
					}

					.right {
						flex: 1;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						padding: 32upx 0;
						border-bottom: 2upx solid #EBEBEB;

						.goods-img {
							width: 156upx;
							height: 156upx;
							background: rgba(255, 255, 255, 1);
							border: 1upx solid rgba(217, 217, 217, 1);
							opacity: 0.97;
							border-radius: 2upx;
							margin-right: 31upx;

							image {
								width: 156upx;
								height: 156upx;
							}
						}

						.info {
							flex: 1;
							height: 156upx;

							.name {
								display: flex;
								font-size: 23upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(0, 0, 0, 1);
								line-height: 50upx;
							}

							.price {
								display: flex;
								font-size: 33upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(240, 64, 111, 1);
							}

							.option {
								display: flex;
								font-size: 23upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(93, 93, 93, 1);
								justify-content: space-between;
								margin-top: 30upx;
							}
						}

					}

					&:last-child .right {
						border: none;
					}
				}

			}

		}

		.isiphonx {
			bottom: 80px;
		}

		.footer-btn {
			position: fixed;
			bottom: 50px;
			z-index: 95;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// width: 100%;
			height: 125upx;
			background: #1B1B1B;
			padding: 0 30upx;
			// margin-bottom: 50px;
			left: 0;
			right: 0;

			.left {
				width: 43%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.checkall {
					image {
						width: 34upx;
						height: 34upx;
						margin-right: 22upx;
					}

					font-size:22upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
				}

				.freight {
					font-size: 22upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(136, 136, 136, 1);
				}

			}

			.right {
				width: 57%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.total {
					font-size: 33upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					white-space: nowrap;

					.price {
						font-size: 33upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(240, 64, 111, 1);
					}
				}

				.settlement {
					padding: 14upx 30upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 31upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					background: rgba(240, 64, 111, 1);
					border-radius: 29upx;
					color: rgba(255, 255, 255, 1);
					white-space: nowrap;

				}
			}

		}
	}
</style>
